<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌手</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<lable class="layui-form-label">名字</lable>
<div class="layui-inline">
    <input class="layui-input" id="searchName" type="text">
</div>
<input id="searchAnything" type="button" value="查询" class="layui-btn"/>
<table id="singer" lay-filter="singerTable">

</table>
<!---------------------添加歌手 start------------------------------->
<form class="layui-form" id="addSinger" style="display: none;padding: 20px 30px 0 0" lay-filter="insertFormFilter">
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-inline">
            <input type="text" name="singerName" placeholder="请输入歌手" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!---------------------添加歌手 end------------------------------->

<!---------------------修改歌手 start------------------------------->
<form class="layui-form" id="updateSinger" style="display: none;padding: 20px 30px 0 0" lay-filter="updateFormFilter">
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-inline">
            <input type="hidden" name="singerId">
            <input type="text" name="singerName"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!---------------------修改歌手 end------------------------------->
<!-------------------------toolbar1 start------------------------->
<script type="text/html" id="toolbar1">
    <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>
<!-------------------------toolbar1 end--------------------------->
<!-------------------------toolbar2 start------------------------->
<script type="text/html" id="toolbar2">
    <a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
</script>
<!-------------------------toolbar2 end--------------------------->
<script>
    layui.use(["form","layer","table"],function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;
        var table = layui.table;
        table.render({
            elem:"#singer",
            limit:5,
            limits:[5,10,15],
            url:"singer/selectPage",
            page:true,
            toolbar:"#toolbar2",
            cols:[[
                {field:"singerId",title:"ID"},
                {field:"singerName",title:"分类名"},
                {title:"操作",toolbar:'#toolbar1'}
            ]]
        });
        //=========================绑定添加按钮===================
        table.on('toolbar(singerTable)',function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if(obj.event=="add"){

                layer.open({
                    type:1,
                    content:$("#addSinger"),
                    area:["400px","200px"],
                    title:'添加'
                });

            }
        });
        //=======================================================
        //========================绑定删除事件======================

        table.on("tool(singerTable)",function (obj) {
            if(obj.event=="delete"){
                console.log(obj.data.singerId);
                layer.confirm("确定要删除吗？",{icon:5},function (index) {
                    var id = obj.data.singerId;
                    $.ajax({
                        url:"singer/delete",
                        dataType:"json",
                        data:"id="+id,
                        success:function (data) {
                            if(data.isDelete){
                                layer.msg("删除成功",{icon:1,time:2000});
                                table.reload('singer');
                            }
                        }

                    })
                })
            }else if (obj.event=="update"){
                console.log(obj.data.singerId);
                var selectData=null;
                $.ajax({
                    url:"singer/selectOne",
                    data:"id="+obj.data.singerId,
                    dataType:"json",
                    success:function (data) {
                        //val中填写form表单lay-Filter的值
                        form.val('updateFormFilter',{
                            singerId:data.singerId,
                            singerName:data.singerName,
                        })
                    }
                });
                layer.open({
                    type:1,
                    content:$("#updateSinger"),
                    area:["400px","200px"],
                    title:'修改'
                })
            }
        })

        //========================================================
        //-------------------添加按钮绑定事件 start---------------------------
        form.on('submit(addSubmit)',function () {

            $.ajax({
                type:"post",
                url:"singer/insert",
                data:$("#addSinger").serialize(),
                success:function (data) {
                    if(data.isInsert){
                        /*layer.msg("图书添加成功", {icon: 1,time:3000});*/
                        $("#addSinger")[0].reset();
                        layer.confirm("添加成功,要退出添加界面吗？",{icon: 1},function (index) {
                            layer.closeAll();
                        })
                        table.reload('singer')
                    }
                },
                dateType:"json"
            });
            return false;
        });
        //-------------------添加按钮绑定事件 end---------------------------
        //-------------------修改按钮绑定事件 start-------------------------
        form.on('submit(updateSubmit)',function () {

            $.ajax({
                type:"post",
                url:"singer/update",
                data:$("#updateSinger").serialize(),
                success:function (data) {
                    console.log(data)
                    if(data.isUpdate){
                        layer.confirm("修改成功,要退出修改界面吗？",{icon: 1},function (index) {
                            layer.closeAll();
                        })
                        table.reload('singer')
                    }
                },
                dateType:"json"
            });
            return false;
        });

        //-------------------修改按钮绑定事件 end---------------------------

    })
</script>
</body>
</html>